<template>
	<view class='content' v-if="showMain">
		<view class="ruldescription">
			<view class='question' style="margin: 3rem auto;">
				<view class='nums'>说明</view>
				<view class="rule">{{ruldescription}}</view>
				<view class='btns'>
					<view class="continues" @click="continues">继续答题</view>
					<view class="cancel" @click="cancel">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	export default {
		data(){
			return{
				showMain:false,
				ruldescription:"你答题我送礼：用户在规定的时间内答题，并且正确率达到指定指标即可根据答题结果到景区领取奖品!",
			}
		},
		onLoad(option) {
			
		}, 
		onShow() {
			// 判断是否登录
			var isLogin = uni.getStorageSync("token");
			var vm = this;
			
			if(!isLogin){
				vm.showMain = false;
				uni.showModal({
						title: '提示',
						content: '请先登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login-app/login-app"
								})
							} else if (res.cancel) {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						}
					});
			}else{
				vm.showMain = true;
			}
		},
		
		methods:{
			toback:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			
			//继续答题
			continues:function(){
				uni.navigateTo({
				    url: "/pages/questions/index"
				});
			},
			//取消答题
			cancel:function(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		},
	}
</script>

<style>
	.btns{
		display: flex;
		text-align: center;
		font-size: 15px;
		margin-top: 3rem;
	}
	.btns .continues{
		background: #FFCA30;
		color: #FFF;
		flex:1;
		padding: 5px 0;
		margin-right: 1rem;
		border-radius: 3px;
	}
	.btns .cancel{
		background: #CCC;
		color: #FFF;
		flex:1;
		padding: 5px 0;
		border-radius: 3px;
	}
	.rule{
		padding-top: 2rem;font-size: .85rem;
		color:#777;text-indent: 1em;    
		line-height: 1.5rem;
	}
	.content{
		height: 100%;
		background-position: center;
		background-size: cover;
		background-image: url(../../static/imgs/dtbg.jpg);
		background-repeat: no-repeat;
		width: 100%;
		position: absolute;
		overflow: hidden;
		margin: 0;
	}
	.title{
		color: #FFCA2E;
		text-align: center;
		font-size: 1.5rem; 
		padding: 0 0 1rem 0;
	}
	.time{
		font-size: 12px;
		color:#777;
	}
	.answers{
		position: relative;
	}
	.boxShow{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: #ccc;
		opacity: .4;
	}
	.question{
		position: relative;
		background: #FFF;
		padding: 1rem 1rem .5rem 1rem;
		width: 75%;
		border-radius: 10px;
		margin:0 auto;
	}
	.nums{
		position: absolute;
		background: #FFCA30;
		color: #FFF;
		width: 8rem;
		padding: 7px 5px;
		font-size: 14px;
		text-align: center;
		border-radius: 0 0 1.2rem 1.2rem;
		top: 0;
		left: calc(50% - 4rem);
	}
	.qusname{
		padding: 2rem 0 1rem 0;
		font-size: 15px;
	}
	.aclabel{
		display: flex;
		padding: .5rem 0;
		font-size: 14px;
	}
	.confirm{
		background: #FFCA30;
		color: #FFF;
		text-align: center;
		padding: 5px 10px;
		border-radius: 5px;
		width:5rem;
		margin: 1rem auto 1rem auto;
		font-size: 14px;
	}
	.rightkey{
		margin-top: .5rem;
		padding: 1rem 0 0 0;
		color: #DD524D;
		border-top: 1px dashed #DD524D;
		font-size: 15px;
	}
</style>
